<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="创建蜂计划" />
		<!-- <view class="top-menu">
		</view> -->
		<view class="plan-select-back">
			<view class="unSelect-plan-contView" v-if="planPhase == 0">
				<image class="unlist-content-img" src="../../static/image/fjh/beePlan-leftimg-place.png"
					mode="aspectFit"></image>
				<view class="unlist-rightContent">
					<view class="list-content-title" style="color: var(--titleColorTwo); margin-bottom: 5px;">
						从下方选择一本词库</view>
					<view class="tagclass">定制您的蜂计划</view>
				</view>
				<image class="course-logo2" src="../../static/image/fjh/course-logo-eng.png" mode="scaleToFill" />
			</view>
			<view class="plan-list-contView" v-if="planPhase == 1 || planPhase == 2">
				<view style="width: 25px;">
				</view>
				<view class="list-rightContent">
					<view class="list-content-name">{{cikuName}}</view>
				</view>
				<view class="select-right-menu" @click="replaceCikuTap">重新选择</view>
			</view>
			<view class="created-plan-cikuView" v-if="planPhase == 2">
				<view class="created-plan-cikuNmae">计划：每日<text class="whiteColor">{{words}}</text>词，使用<text
						class="whiteColor">{{days}}</text>天</view>
				<view class="created-plan-replaceSelectBtn" @click="replacePlanTap">重新制定</view>
			</view>
		</view>
		<scroll-view class="words-scroll" :style="{ height: scrollHeight + 'px'}" scroll-y
			:scroll-with-animation='true'>
			<view class="bee-gameType-content-back" v-if="planPhase == 0">
				<view class="gameType-topTitle-view" style="margin-bottom: 15px;">
					<view class="gameType-topTitle">
						选择词库 | Select Word Bank
					</view>
					<view class="gameType-line"></view>
				</view>
				<block v-for="(item, index) in allWordList" :key="index">
					<view class="plan-head-view" :data-index="index" @click="unfoldClicked">
						<view class="head-content-img">
							<view class="plan-head-str">
								{{item.str}}
							</view>
						</view>
						<view class="head-rightContent">
							<view class="head-content-name">{{item.title}}</view>
							<view class="head-content-eng">{{item.engTitle}}</view>
							<view class="head-content-unfold">
								{{item.isUnfold == true ? '点击收起' : '点击展开'}}
							</view>
						</view>
					</view>
					<block v-for="(childItem, chindIndex) in (item.isUnfold ? item.wordList : [])"
						:key="'child' + chindIndex">
						<view class="plan-list-contView" :data-item="childItem" @click="thesaurusTap">
							<view class="unpurchase-backView" v-if="childItem.isExpired == 1"></view>
							<!-- <image class="list-content-img" :src="childItem.imgUrl" mode="aspectFit"></image> -->
							<view style="width: 30px;">
							</view>
							<view class="list-rightContent">
								<view class="list-content-name">{{childItem.productName}}</view>
								<view class="list-content-eng">{{childItem.productEngName}}</view>
							</view>
							<view class="list-content-rightStr" v-if="childItem.isExpired == 0">
								点击选择
							</view>
						</view>
					</block>
				</block>
			</view>
			<view class="dayNumberbackView" v-if="planPhase == 1">
				<view class="create-plan-dayNumberbackView">
					<view class="gameType-topTitle-view">
						<view class="gameType-topTitle" style="color: white;">
							设置每日任务 | Set Daily Tasks
						</view>
						<view class="gameType-line"></view>
					</view>
					<view class="create-plan-topBackView">
						<view class="create-plan-topleftView">
							<view class="create-plan-wordNumber">单词总数<text class="focuson-text">{{allWords}}</text>个
							</view>
							<view class="create-plan-wordNumber">需打卡天数<text class="focuson-text">{{days}}</text>天</view>
							<view class="create-plan-wordNumber">每天预计<text class="focuson-text">{{second}}</text>分钟
							</view>
							<view class="create-plan-finishDay">预计完成时间：</view>
							<view class="create-plan-wordNumber" style="color: red;">{{finishDay}}</view>
						</view>
						<view class="create-plan-topContentView">
							<view class="create-plan-selectTitle">每天单词数</view>
							<view class="create-plan-selectbackView">
								<picker-view style="width: 140px; height: 180px; border-radius: 20px;"
									@change="bindChange">
									<picker-view-column class="selectbackViewChild">
										<view v-for="(item, index) in dayPickerArray" :key="index"
											class="select-dayClass">{{item}}个
										</view>
									</picker-view-column>
								</picker-view>
							</view>
						</view>
					</view>
					<button class="nextbuttonclass" @click="nextTap">下一步</button>
				</view>
			</view>
			<view class="dayNumberbackView">
				<view class="create-plan-dayNumberbackView" v-if="planPhase == 2">
					<view class="gameType-topTitle-view">
						<view class="gameType-topTitle" style="color: white;">
							设置计划封面 | Set Plan Cover
						</view>
						<view class="gameType-line"></view>
					</view>
					<image class="create-plan-coverImage" :src="plancoverImageUrl" @click="selectCoverImgTap"
						mode="aspectFit"></image>
					<input class="create-plan-nameInput" @input='planNameBindinput' maxlength="12"
						placeholder="起一个霸气的计划名（12个字以内）" :value="planName" />
					<button class="beginPlanbutton" @click="showTopPlanbuttonTap">开始你的蜂计划</button>
				</view>
			</view>
		</scroll-view>
		<beePlanPunchMode v-if="showPunchMode" @determinePlay="determinePlay"></beePlanPunchMode>
		<selectContentView v-if="showTopicPromptbox" :msg="popMessage" confirmTitle="确认创建" cancelTitle="我再想想"
			@confirm="turnToplayGame" @cancel="hidePromptbox"></selectContentView>
		<popPromptBox v-if="showPopbox" :msg="message" @confirm="hidePromptbox"></popPromptBox>
	</scroll-view>
</template>

<script>
	import customSoftKeyboard from '../../components/customSoftKeyboard.vue';
	import beePlanPunchMode from '../../components/planBeeCom/beePlanPunchMode.vue'
	import config from '../../request/config.js';
	export default {
		components: {
			customSoftKeyboard,
			beePlanPunchMode
		},
		data() {
			return {
				showPopbox: false,
				planName: '',
				showTopicPromptbox: false,
				showPunchMode: false,
				words: 0, // 每天单词数
				days: 0, // 完成天数
				allWords: 0, //单词总数
				second: 0, // 每天需要多少分钟
				formType: 1,
				UnfoldList: [true, false],
				allWordList: [],
				scrollHeight: uni.getSystemInfoSync().windowHeight,
				planPhase: 0,
				plancoverImageUrl: require('@/static/image/fjh/planCoverimage.png'),
			}
		},
		onLoad(options) {
			this.effectiveDays = options.days;
			this.getWordList();
		},
		onReady() {
			const that = this
			uni.createSelectorQuery().select('.plan-select-back').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom;
			}).exec();
		},
		methods: {
			//获取词库列表
			getWordList: function() {
				var that = this;
				this.$http.findAllBeePlanWordList({}).then(res => {
					if (res.code == 200) {
						that.allWordList = [];
						let invitationData = {
							"title": "| 个人赛冠军词库 |",
							"engTitle": "Individual Word Bank",
							"isUnfold": true,
							"str": '个',
							"wordList": res.data.spbcn,
						}
						that.allWordList = that.allWordList.concat(invitationData);
						var TeamData = {
							"title": "| 团体赛冠军词库 |",
							"engTitle": " Team Word Bank",
							"str": '团',
							"isUnfold": false,
							"wordList": res.data.itso,
						}
						that.allWordList = that.allWordList.concat(TeamData);
						console.log('allWordList', that.allWordList);
						that.allWordList = that.allWordList;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			inputChange(value) {
				console.log('value', value);
			},
			unfoldClicked(value) {
				const selectIndex = value.currentTarget.dataset.index;
				this.allWordList[selectIndex].isUnfold = !this.allWordList[selectIndex].isUnfold;
			},
			// 词库选择点击
			thesaurusTap(e) {
				console.log('e', e);
				var selectData = e.currentTarget.dataset.item;
				var wordNumber = parseInt(selectData.wordCount);
				if (selectData.isExpired == 1) { // 未购买
					this.showPopbox = true;
					this.message = this.$statusCode.payPopMessage
					// uni.showToast({
					// 	title: this.$statusCode.payPopMessage,
					// 	icon: 'none',
					// 	duration: 2000,
					// });
				} else {
					var formData = {
						code: selectData.flag,
					};
					var words = [];
					for (let i = 10; i <= 120; i++) {
						if (i % 5 == 0) {
							words.push(i);
						}
					}
					// 获取单词总数
					this.$http.wordCount(formData).then(res => {
						if (res.code == 200) {
							this.productId = res.data.id;
							this.dayPickerArray = words;
							this.allWords = res.data.spellCount;
							this.cikuName = res.data.name;
							this.cikuName = res.data.name;
							this.cikuImgUrl = res.data.imgUrl;
							this.planPhase = this.formType;
							this.selectDay(words[0]);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000,
							});
						}
					})
				}
			},
			//根据所选单词数计算其他数值
			selectDay: function(dayWords) {
				var needDays = this.allWords % dayWords == 0 ? (this.allWords / dayWords) : Math.ceil(this
					.allWords / dayWords);
				this.days = needDays;
				this.finishDay = this.getNowData(needDays);
				this.words = dayWords;
				this.second = Math.ceil(this.allWords / needDays * 45 / 60);
				console.log('dayWords', dayWords);
			},
			// 重新选择词库
			replaceCikuTap: function() {
				this.formType = 1;
				this.planPhase = 0;
			},
			// 重新计划时间
			replacePlanTap: function() {
				var planphase = this.planPhase;
				this.formType = planphase;
				this.planPhase = 1;
			},
			//天数选择回调
			bindChange: function(e) {
				var index = e.detail.value[0];
				this.selectDay(this.dayPickerArray[index]);
			},
			// 根据所选天数返回预计完成天数
			getNowData: function(days) {
				var timestamp = Date.parse(new Date());
				var date = new Date(timestamp + days * 86400000);
				//获取年份  
				var Y = date.getFullYear();
				//获取月份  
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				//获取当日日期 
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				return Y + '年' + M + '月' + D + '日';
			},
			//选择完天数下一步显示打卡方式
			nextTap: function() {
				if (this.effectiveDays > this.days) {
					this.showPunchMode = true;
				} else {
					this.showTopicPromptbox = true;
					this.popMessage = '您当前所选单词打卡天数已大于蜂计划有效天数，是否继续创建';
					this.popType = 'selectNumber';
				}
			},
			//   选择打卡方式
			determinePlay: function(e) {
				console.log('e', e)
				this.showPunchMode = false;
				this.sort = e.sort;
				this.planPhase = 2;
				// if (this.effectiveDays > this.days) {
				// 	this.planPhase = 2;
				// } else {
				// 	this.showTopicPromptbox = true;
				// 	this.popMessage = '您当前所选单词打卡天数已大于蜂计划有效天数，是否继续创建';
				// 	this.popType = 'selectNumber';
				// }
			},
			turnToplayGame: function() {
				if (this.popType == 'created') { //创建蜂计划
					this.beginPlanbuttonTap();
				} else { //确认所选单词数
					this.showTopicPromptbox = false;
					this.showPunchMode = true;
				}
			},
			hidePromptbox: function() {
				this.showTopicPromptbox = false;
				this.showPopbox = false;
			},
			planNameBindinput(e) {
				let reg =
					/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
				if (e.detail.value.match(reg)) {
					if (e.detail.value.replace(reg, '').length <= 12) {
						this.planName = e.detail.value.replace(reg, '');
					}
				} else {
					if (e.detail.value.length <= 12) {
						this.planName = e.detail.value;
					}
				}
			},
			//选择计划封面图
			selectCoverImgTap: function() {
				var that = this;
				var url = config.api()[1] + 'upload/uploadFileAliOss';
				this.$upLoadImage.selectImageData(this, url, 'spbcnapp/beeplanCover/', function(res) {
					console.log('res', res);
					that.plancoverImageUrl = res.data;
				})
			},
			showTopPlanbuttonTap: function() {
				if (this.plancoverImageUrl == 'https://cdn.spbcn.org/spbcnappneed/planCoverimage.png') {
					uni.showToast({
						title: '选一个打卡计划封面',
						icon: 'none',
						duration: 2000,
					});
					return;
				}
				if (this.planName == '') {
					uni.showToast({
						title: '起一个霸气的计划名',
						icon: 'none',
						duration: 2000,
					});
					return;
				}
				this.showTopicPromptbox = true;
				this.popType = 'created';
				this.popMessage = '为了养成每日学习单词的好习惯，蜂计划创建后每日打卡单词数就不能更改了哦，是否确认创建该计划？';
			},
			//开始蜂计划
			beginPlanbuttonTap: function() {
				var that = this;
				console.log(this.productId, this.days, this.words);
				var formData = {
					'thesaurusId': this.productId,
					'name': this.planName,
					'needClockWordCount': this.words,
					'imgUrl': this.plancoverImageUrl,
					'wordSort': this.sort,
				};
				console.log('formData', formData);
				this.$http.createBeeplan(formData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '定制成功',
							icon: 'success',
							duration: 1500,
							success: function() {
								setTimeout(function() {
									//要延时执行的代码
									uni.redirectTo({
										url: '/pages/planBee/wordClockSignInCalendar?planId=' +
											res.data.id,
									})
								}, 1500) //延迟时间
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.bee-gameType-content-back {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.create-plan-coverImage {
		width: 290px;
		height: 190px;
		margin-top: 20px;
		border-radius: 20px;
	}

	.create-plan-nameInput {
		width: 290px;
		height: 35px;
		background-color: white;
		text-align: center;
		font-size: 12px;
		color: black;
		font-weight: 500;
		line-height: 35px;
		border-radius: 18px;
		margin-top: 15px;
		font-weight: 600;
	}

	.beginPlanbutton {
		margin-top: 20px;
		width: 200px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		font-family: 'hzgb';
		font-size: 16px;
		color: black;
		background: var(--themeColor);
		/* background: linear-gradient(#fe984c, #fd4f5a); */
	}

	.plan-select-back {
		width: 100%;
		padding: 15px;
		background: linear-gradient(to bottom, #1c170d, #373632);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.plan-list-contView {
		width: 92%;
		height: 60px;
		box-sizing: border-box;
		border-top-left-radius: 30px;
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: var(--themeGradientTopBack);
		box-shadow: 0px 5px 0px 0px rgb(100, 100, 100);
		margin-bottom: 15px;
		position: relative;
	}

	.unpurchase-backView {
		width: 100%;
		height: 100%;
		border-top-left-radius: 35px;
		border-bottom-left-radius: 35px;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
		background-color: rgba(0, 0, 0, 0.6);
		position: absolute;
		z-index: 10;
	}

	.created-plan-cikuView {
		width: 92%;
		height: 40px;
		box-sizing: border-box;
		border-radius: 20px;
		background: var(--themeColor);
		margin: 10px 0px;
		padding-left: 25px;
		padding-right: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.select-right-menu {
		width: 60px;
		height: 50px;
		position: absolute;
		background: #a3c72b;
		color: white;
		font-size: 11px;
		text-align: center;
		line-height: 50px;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		right: 10px;
		z-index: 11;
		font-family: 'hzgb';
	}

	.list-content-img {
		width: 50px;
		height: 50px;
		margin: 0px 10px;
	}

	.list-rightContent {
		height: 60px;
		width: 255px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: self-start;
	}

	.list-content-rightStr {
		font-size: 10px;
		font-family: 'hzgb';
		padding-right: 15px;
		text-align: right;
		flex: 1;
		color: black;
	}

	.created-plan-cikuNmae {
		width: 210px;
		height: 40px;
		line-height: 40px;
		color: black;
		font-size: 14px;
		text-align: left;
		font-family: 'hzgb';
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.created-plan-replaceSelectBtn {
		width: 60px;
		height: 28px;
		border-radius: 14px;
		line-height: 28px;
		text-align: center;
		color: white;
		font-size: 11px;
		font-family: 'hzgb';
		background: #e89d05;
	}

	.unSelect-plan-contView {
		width: 92%;
		height: 70px;
		overflow: hidden;
		border-top-left-radius: 35px;
		border-bottom-left-radius: 35px;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
		padding-left: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #ede6cd;
		position: relative;

		.unlist-content-img {
			width: 50px;
			height: 50px;
			margin-right: 15px;
		}

		.unlist-rightContent {
			height: 60px;
			width: 206px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: self-start;
		}

		.list-content-title {
			text-align: left;
			font-family: 'hzgb';
			color: rgb(0, 0, 0);
		}

		.tagclass {
			height: 20px;
			border-radius: 10px;
			padding: 0px 15px;
			background: var(--titleColorTwo);
			color: white;
			font-family: 'hzgb';
			font-size: 11px;
			text-align: center;
			line-height: 20px;
		}
	}

	.course-logo2 {
		position: absolute;
		right: 10px;
		width: 34px;
		height: 70px;
		z-index: 10;
	}

	.list-content-name {
		width: 100%;
		font-size: 14px;
		font-family: 'hzgb';
		color: black;
	}

	.list-content-eng {
		width: 100%;
		font-size: 10px;
		font-family: 'hzgb';
		color: black;
	}

	.plan-head-view {
		width: 92%;
		height: 80px;
		padding: 0px 15px;
		box-sizing: border-box;
		border-top-left-radius: 40px;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: var(--themeBlackTopBack);
		box-shadow: 0px 5px 0px 0px rgb(100, 100, 100);
		margin-bottom: 15px;
		position: relative;

		.head-content-img {
			width: 60px;
			height: 60px;
			color: black;
			background: var(--themeButtonIconBack);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30px;

			.plan-head-str {
				width: 60px;
				height: 60px;
				font-size: 50px;
				line-height: 60px;
				text-align: center;
				font-size: 40px;
				font-family: 'hzgb';
			}
		}

		.head-rightContent {
			width: 207px;
			margin-left: 10px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			box-sizing: border-box;

			.head-content-name {
				width: 100%;
				font-size: 16px;
				color: white;
				font-family: 'hzgb';
			}

			.head-content-eng {
				width: 100%;
				font-weight: 800;
				font-size: 12px;
				color: white;
			}

			.head-content-unfold {
				height: 16px;
				padding: 0px 15px;
				margin-top: 3px;
				line-height: 16px;
				border-radius: 8px;
				letter-spacing: 2px;
				background: var(--themeButtonTopBack);
				font-family: 'hzgb';
				font-size: 10px;
				text-align: center;
			}
		}
	}

	.plan-head-img {
		width: 100%;
		height: 100%;
		border-top-left-radius: 40px;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 5px;
		border-top-right-radius: 5px;
		position: absolute;
		left: 0;
		top: 0;
		background-image: url(../../static/image/fjh/word_app_plan_back.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.dayNumberbackView {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.create-plan-dayNumberbackView {
		width: 92%;
		min-height: 370px;
		margin: 20px 0px;
		padding: 15px 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: var(--beeGradeTopBack);
		justify-content: flex-start;
		border-radius: 20px;
	}

	.create-plan-topBackView {
		width: 89%;
		display: flex;
		flex-direction: row;
	}

	.create-plan-topleftView {
		width: 47%;
		height: 225px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}

	.create-plan-topContentView {
		width: 47%;
		height: 240px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.create-plan-wordNumber {
		padding: 5px 8px;
		margin-bottom: 8px;
		margin-top: 5px;
		border-radius: 15px;
		font-size: 13px;
		color: black;
		font-weight: 500;
		background-color: #F3EB1D;
	}

	.create-plan-finishDay {
		padding: 3px 8px;
		margin-top: 5px;
		font-size: 14px;
		font-family: 'hzgb';
		color: white;
		font-weight: 500;
	}


	.focuson-text {
		color: red;
	}

	.nextbuttonclass {
		width: 175px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		font-size: 16px;
		color: black;
		font-family: 'hzgb';
		background: var(--themeColor);
		margin-bottom: 10px;
	}

	.create-plan-selectTitle {
		height: 40px;
		line-height: 40px;
		font-size: 17px;
		font-family: 'hzgb';
		color: white;
		font-weight: 800;
	}

	.create-plan-selectbackView {
		width: 140px;
		height: 180px;
		background-color: white;
		border-radius: 20px;
	}

	.selectbackViewChild {
		border-radius: 20px;
	}

	.select-dayClass {
		line-height: 34px;
		text-align: center;
		color: black;
	}
</style>